<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>用parseInt解析数字，并求和</title>
    <style>
        body {
            font: 12px/1.5 arial;
            text-align: center;
        }

        .f-text {
            width: 50px;
            border: 1px solid #ccc;
            background: #f0f0f0;
            font-family: inherit;
            padding: 3px;
        }

        span {
            color: green;
            padding-right: 10px;
            font-weight: 700;
        }

        strong {
            padding: 0 10px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            let aInput = document.querySelectorAll("input");
            let aSpan = document.querySelector("span");

            for (let i = 0; i < aInput.length - 1; i++) {
                aInput[i].onkeyup = function () {
                    this.value = this.value.replace(/[^\d]/, "") //非数字变空
                }
            }

            aInput[2].onclick = function () {
                aInput[0].value && aInput[1].value ? aSpan.innerHTML = parseInt(aInput[0].value) + parseInt(
                    aInput[1].value) : alert("请输入数字！")
            }
        };
    </script>
</head>

<body>
    <input type="text" class="f-text" /><strong>+</strong><input type="text"
        class="f-text" /><strong>=</strong><span>?</span><input type="button" value="求和" />
</body>

</html>